Vue.component('swt-pagination', {
    props: {
        perPage: {
            type: Number,
            default: 20
        },
        totalRows: {
            type: Number,
            default: 20
        },
    },

    data: function () {
        return {

        }
    },

    //:"计算属性",
    computed:{
        numberOfPages : function () {
            const result = Math.ceil(this.totalRows / this.perPage);

            console.log(result);
            return (result < 1) ? 1 : result;
        }
    },

    methods:{
        onPageChanged : function (){
            console.log('components page click');
            this.$emit('onPageChanged') //报告自己的内部事件
        },


    },

    template: '\
    <nav aria-label="Page navigation">\
        <ul class="pagination">\
        <li>\
            <a href="#" aria-label="Previous">\
                <span aria-hidden="true">&laquo;</span>\
            </a>\
        </li>\
        <li><a href="#" @click="onPageChanged">1</a></li>\
        <li><a href="#" @click="onPageChanged">2</a></li>\
        <li><a href="#" @click="onPageChanged">3</a></li>\
        <li><a href="#" @click="onPageChanged">4</a></li>\
        <li><a href="#" @click="onPageChanged">5</a></li>\
        <li>\
            <a href="#" aria-label="Next">\
                <span aria-hidden="true">&raquo;</span>\
            </a>\
        </li>\
        </ul>\
    </nav>\
    ',

    created:function(){

    },
})


new Vue({
    el: '#app',
    data: {
        checked : true
    },
    methods: {
        onPageChangedClick : function () {
            console.log('page changed');
        }
    }
})
